<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
            
    <ui:define name="head">
        <style type="text/css">
            .label, column {
                vertical-align: top;
            }
        </style>
    </ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">SelectManyMenu</h1>
		<div class="entry">
            <p>SelectManyMenu extends standard SelectManyMenu with advanced styling and custom content support.</p>

			<h:form id="form">

                <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"
                             columnClasses="label, column">

                    <h:outputText value="Basic" />
                    <p:selectManyMenu id="basic" value="#{formBean.selectedOptions}">
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </p:selectManyMenu>

                    <h:outputText value="Advanced" />
                    <p:selectManyMenu id="scroll" value="#{autoCompleteBean.selectedPlayers}" converter="player" style="width:150px;height:200px" var="p" showCheckbox="true">
                        <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}" />
                    
                        <p:column>
                            <p:graphicImage value="/images/barca/#{p.photo}" width="40"/>
                        </p:column>

                        <p:column>
                            #{p.name} - #{p.number}
                        </p:column>
                    </p:selectManyMenu>

                </h:panelGrid>

                <p:commandButton id="btn" value="Submit" update="display" oncomplete="PF('dlg').show()" />

                <p:dialog id="dialog" header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">
                    <p:outputPanel id="display">
                        <p:dataList id="selectedOptions" value="#{formBean.selectedOptions}" var="option">
                            #{option}
                        </p:dataList>

                        <p:dataList id="selectedPlayers" value="#{autoCompleteBean.selectedPlayers}" var="player">
                            #{player.name}
                        </p:dataList>
                    </p:outputPanel>
                </p:dialog>

			</h:form>

			<h3>Source</h3>
			<p:tabView>
				<p:tab title="selectManyMenu.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"
                 columnClasses="label, column"&gt;

        &lt;h:outputText value="Basic" /&gt;
        &lt;p:selectManyMenu id="basic" value="\#{formBean.selectedOptions}"&gt;
            &lt;f:selectItem itemLabel="Option 1" itemValue="Option 1" /&gt;
            &lt;f:selectItem itemLabel="Option 2" itemValue="Option 2" /&gt;
            &lt;f:selectItem itemLabel="Option 3" itemValue="Option 3" /&gt;
        &lt;/p:selectManyMenu&gt;

        &lt;h:outputText value="Advanced" /&gt;
        &lt;p:selectManyMenu id="scroll" value="\#{autoCompleteBean.selectedPlayers}" converter="player" style="width:150px;height:200px" var="p" showCheckbox="true"&gt;
            &lt;f:selectItems value="\#{autoCompleteBean.players}" var="player" itemLabel="\#{player.name}" itemValue="\#{player}" /&gt;

            &lt;p:column&gt;
                &lt;p:graphicImage value="/images/barca/\#{p.photo}" width="40"/&gt;
            &lt;/p:column&gt;

            &lt;p:column&gt;
                \#{p.name} - \#{p.number}
            &lt;/p:column&gt;
        &lt;/p:selectManyMenu&gt;

    &lt;/h:panelGrid&gt;

    &lt;p:commandButton id="btn" value="Submit" update="display" oncomplete="PF('dlg').show()" /&gt;

    &lt;p:dialog id="dialog" header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg"&gt;
        &lt;p:outputPanel id="display"&gt;
            &lt;p:dataList id="selectedOptions" value="\#{formBean.selectedOptions}" var="option"&gt;
                \#{option}
            &lt;/p:dataList&gt;

            &lt;p:dataList id="selectedPlayers" value="\#{autoCompleteBean.selectedPlayers}" var="player"&gt;
                \#{player.name}
            &lt;/p:dataList&gt;
        &lt;/p:outputPanel&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
					</pre>

                </p:tab>
			</p:tabView>

		</div>

	</ui:define>
</ui:composition>